<template>
    <div class="common-layout">
        <el-container>
            <el-main>
                <!-- 按钮组件 -->
                <div class="btn">
                    <div class="inp">
                        <el-input placeholder="请输入商品名称" clearable v-model="datas.title" />
                    </div>
                    <div class="inp">
                        <el-input placeholder="请输入商品条形码" clearable v-model="datas.barcode" />
                    </div>
                    <div class="inp">
                        <el-select v-model="datas.status" clearable class="m-2" placeholder="请选择商品状态">
                            <el-option v-for="item in goodsStatusMap" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <div class="inp">
                        <!-- 级联选择器组件 -->
                        <el-cascader v-model="datas.categoryId" :options="categoryDate"
                            :props="{ emitPath: false, label: 'title', value: 'id', children: 'childrenList' }"
                            placeholder="请选择类目" filterable clearable />
                    </div>
                    <el-button type="primary" :icon="Search" @click="init">查找</el-button>
                    <el-button type="primary" :icon="Plus" @click="add">添加</el-button>
                </div>
                <!-- 表格组件 -->
                <div id="tab">
                    <el-table :data="goodsData" border width="100%">
                        <!-- 页面主表格渲染 -->
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="expand" label="sku信息" width="100">
                            <!-- 子表格 -->
                            <template #default="props">
                                <!-- 描述列表组件 -->
                                <el-table :data="props.row.skuList" :border="childBorder">
                                    <el-table-column label="商品条码" prop="barCode" align="center"  />
                                    <el-table-column label="商品规格" prop="title" align="center"  />
                                    <el-table-column label="商品价格" prop="price" align="center" />
                                    <el-table-column label="商品库存" prop="stock" align="center" />
                                    <el-table-column label="原价" prop="originalPrice" align="center" />
                                    <el-table-column label="现价" prop="vipPrice" align="center" />
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="商品ID" align="center" width="100" />
                        <el-table-column prop="title" label="名称" align="center" width="300" />
                        <el-table-column label="图片" align="center" width="100px">
                            <!-- 悬停后显示的图片 -->
                            <template #default="scope">
                                <el-popover effect="light" trigger="hover" placement="top" width="24vw">
                                    <template #default>
                                        <span> <img :src="scope.row.img" style="width: 300px;" /></span>
                                    </template>
                                    <!-- 显示页面的图片 -->
                                    <template #reference>
                                        <span class="pic"> <img :src="scope.row.img" />
                                        </span>
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品详情介绍" align="center" width="100">
                            <template #default="scope">
                                <el-button type="primary" @click="handleLook(scope.row.id)">查看</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="categoryId" label="类目ID" align="center" width="100" />
                        <el-table-column prop="freightTemplateId" label="邮政模版ID" align="center" width="120" />
                        <el-table-column prop="sales" label="销量" align="center" width="80" />
                        <el-table-column prop="unit" label="单位" align="center" width="80" />
                        <el-table-column prop="status" label="是否在售" align="center" width="100">
                            <template #default="scope">
                                <el-tag :type="scope.row.status == 1 ? 'success' : 'primary'">{{ scope.row.status == 1 ?
        '在售' : '未售'
}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="description" label="描述" align="center" width="100" />
                        <el-table-column label="操作" align="center" width="300">
                            <template #default="scope">
                                <el-button type="primary" @click="handlEdit(scope.row.id)">编辑</el-button>
                                <el-button :type="scope.row.status == 1 ? 'warning' : 'success'"
                                    @click="handlState(scope.row)">{{ scope.row.status == 1 ? '上架' : '下架' }}</el-button>
                                <el-button type="danger" @click="handlDelt(scope.$index, scope.row)" v-permissions="'product:product:delete'">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页组件 -->
                <Pagination @page-change="handlePagehange" v-bind="datas" />
                <!-- 查看图片--弹出框 -->
                <el-dialog v-model="dialogTableVisible" title="商品详情">
                    <div v-html="pic" class="detail-image"></div>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>
  
<script lang="ts" setup>
import type { User, groups } from '@/type/params'//引入类型
import { ref, onMounted, reactive } from 'vue'//引入响应式，生命周期
import { Search, Plus } from '@element-plus/icons-vue'//引入图标
import { post } from '@/untils/request'//引入请求方式
import Pagination from '@/components/Pagination.vue' //引入分页组件
import { ElMessage } from 'element-plus'//引入消息提示框
import { useRouter } from "vue-router"//引入路由

const router = useRouter()
const childBorder = ref(true)
const title = ref<string>('')
const dialogTableVisible = ref(false)//查看弹出框--默认隐藏
const goodsData = ref([])//商品列表
const categoryDate = ref([])//类目列表
const datas = ref({//渲染页面数据
    _gp: 'admin.product',
    _mt: 'list',
    status: undefined,//商品状态
    id: '',//团购id
    spuId: undefined,//商品id
    title: '',//搜索关键字
    total: 0,//总条数
    page: 1,//当前页面
    limit: 10,//一页面所显示的条数
    barcode: '',//条形码
    categoryId: ''//类目ID
})
//商品状态
const goodsStatusMap = [
    { value: 0, name: '未售' },
    { value: 1, name: '在售' },
]

const pic = ref('')

//表单数据
const form = ref<groups>({
    id: '',
    spuId: undefined,//商品id
    automaticRefund: 0,//未满策略
    gmtStart: '',//开始时间
    gmtEnd: '',//结束时间
    minNum: undefined,
    groupShopSkuList: []
})


//生命周期---挂载后
onMounted(() => {
    init()
})
//渲染
function init() {
    post(datas.value).then(res => {//渲染团购商品列表
        let { items } = res.data
        let { data } = res
        console.log(res, '商品列表数据');
        goodsData.value = items//赋值
        datas.value.total = data.total//赋值总条数
    }).catch(err => {
        console.log(err);
    })
    const details = reactive({
        _gp: 'admin.category',
        _mt: 'categoryTree'
    })
    post(details).then(res => {//渲染商品类目列表
        categoryDate.value = res.data
    }).catch(err => {
        console.log(err);
    })
}
//分页
function handlePagehange(s: { page: number, limit: number }) {
    datas.value.title = ''
    datas.value.barcode = ''
    datas.value.status = undefined
    datas.value.page = s.page
    datas.value.limit = s.limit
    init()
}

//查看图片
function handleLook(spuId: number) {
    dialogTableVisible.value = true//显示对话框
    const details = reactive({
        _gp: 'admin.product',
        _mt: 'detail',
        spuId
    })
    post(details).then(res => {//渲染商品详情列表
        console.log(res, 111);
        pic.value = res.data.detail
    }).catch(err => {
        console.log(err);
    })
}

//添加
function add() {
    title.value = '创建'
    router.push({
        name: 'creategoods' //跳转创建商品
    })
}
//编辑
function handlEdit(id: number) {
    title.value = '编辑'
    router.push({
        name: 'editgoods', params: { id } //跳转编辑商品
    })
}
//状态改变--下架/上架
function handlState(row: User) {
    let states = {
        _gp: 'admin.product',
        _mt: 'freezeOrActivation',
        spuId: row.id,
        status: row.status == '1' ? 0 : 1
    }
    post(states).then(res => {
        console.log('进入了');
        console.log(res);
        let { errno, errmsg } = res
        if (200 == errno) {
            console.log(res, '改变状态');
            ElMessage.success(row.status == '1' ? '下架成功' : '上架成功')
            init()
        } else {
            ElMessage.error(errmsg)
        }
    }).catch(err => {
        console.log(err);
    })
}
//删除
function handlDelt(index: number, row: User) {
    console.log(row);
    const datasDlet = {//删除角色管理数据
        _gp: 'admin.product',
        _mt: 'delete',
        spuId: row.id,//赋值id给当前商品id
    }
    //@ts-ignore  表自动忽略，解决引入plus组件问题
    ElMessageBox.confirm(
        '确定要删除吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        }
    )
        .then(() => {

            post(datasDlet).then(res => {
                let { errno, errmsg } = res
                if (200 == errno) {
                    console.log(res);
                    goodsData.value.splice(index, 1)//删除当前行
                    ElMessage.success('删除成功')
                    init()
                } else {
                    ElMessage.error(errmsg)
                }
            }).catch(err => {
                console.log(err);
                ElMessage.info('删除失败')
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}
</script>
<style lang="less" scoped>
.el-container {
    .btn {
        width: 100%;
        display: flex;

        .inp {
            width: 200px;
            margin-right: 15px;
        }
    }

    .btn,
    #tab {
        margin-bottom: 20px;
    }

    #tab {
        .pic {
            img {
                width: 30px;
                height: 30px;
                vertical-align: middle;
            }
        }
    }

    &::v-deep .el-drawer__body {
        padding: 0;
    }

    &::v-deep .el-card__body {
        padding: 0;
    }

    &::v-deep .el-drawer__header {
        margin-bottom: 0;
    }

    .detail-image {
        &::v-deep img {
            max-width: 100%;
            height: auto;
        }

        &::v-deep p {
            width: 100%;

            img {
                width: 100%;
            }
        }
    }
}
</style>
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    z-index: 1200;
    width: 50vw;
    padding: 0;
    position: relative;
    top: -20px;
}
</style>
